<!--conf
<sample in_favorites="true">
              <product version="1.4" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               <sampledescription><![CDATA[dhtmlx components can interact with each other. This can be quite useful for modern web applications. Drag records from tree and drop it into grid and vice versa.]]></sampledescription></sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>dhtmlxGrid & dhtmlxTree interaction</title>
	



</head>

<body onload="doOnLoad()">
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
	<tr valign="middle">
		<!-- COMPONENT ICON -->
		<td width="40" align="center"><img src="../common/dhtmlxgrid_icon.gif" border="0"></td>
		<!-- COMPONENT NAME -->
		<td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>
		<!-- SAMPLE TITLE -->
		<td width="0" align="left" nowrap><b>dhtmlxGrid & dhtmlxTree interaction</b></td>
		<!-- LINK TO COMPONENT PAGE -->
		<td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml">dhtmlxGrid main page</a></td>
		<!-- CLOSE BUTTON -->
		<td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
	</tr>
</table>
	
	
	<p>Implementing both dhtmlxGrid & <a href="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml">dhtmlxTree</a>
	in your application you can improve flexibility and functionality of its user interface by interaction between these components.<br> 
	Drag-and-drop elements from tree to grid and vice versa. 
	</p>
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
	<script  src="../../codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxgrid.js"></script>
	<script  src="../../codebase/dhtmlxgridcell.js"></script>
	<script  src="../../codebase/ext/dhtmlxgrid_drag.js"></script>    

	<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxTree/codebase/dhtmlxtree.css">
	<script  src="../../../dhtmlxTree/codebase/dhtmlxtree.js"></script>
	<script  src="../../../dhtmlxTree/codebase/ext/dhtmlxtree_xw.js"></script>

    <script>
		var mygrid,tree;
		function doOnLoad(){
			mygrid = new dhtmlXGridObject('gridbox');
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			setTimeout("buildTree()",10)
			setTimeout("buildGrid()",11)
		}
		function buildTree(){
			
			tree.setImagePath("../../../dhtmlxTree/codebase/imgs/csh_bluebooks/");
			tree.enableDragAndDrop(true);
			tree.loadXML("tree3.xml")
    		//tree.setSerializationLevel(true,true);
			tree.setOnClickHandler(getMetaData)
		}
		function buildGrid(){
			//set grid parameters
			mygrid.selMultiRows = true;
			mygrid.setImagePath("../../codebase/imgs/");
			var flds = "Sales,Book Title,Author,Price";
			mygrid.setHeader(flds);
			mygrid.setInitWidths("50,150,120,80")
			mygrid.setColAlign("right,left,left,right")
			mygrid.setColTypes("dyn,ed,ed,price");
			mygrid.setColSorting("int,str,str,int")
			mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
			mygrid.setMultiLine(true)
			mygrid.enableDragAndDrop(true);
			//start grid
			mygrid.init();
			mygrid.loadXML("grid.xml");

			//redefine tree-to-grid drop element
          	mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
				return [0,treeObj.getItemText(treeNodeId)];
			}

			//redefine grid-to-tree drop element
			mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
				return this.cells(gridRowId,1).getValue()+"/"+this.cells(gridRowId,2).getValue();
			}


            mygrid.rowToDragElement = function (id){
                if(this.cells(id,2).getValue()!="")
         			return this.cells(id,2).getValue()+"/"+this.cells(id,1).getValue();
       			return this.cells(id,1).getValue();
            }

		}
		function getMetaData(id){
			if(tree.getUserData(id,"c0")){
				alert("Sales dynamic is: "+tree.getUserData(id,"c0")+"\nPrice is: "+(tree.getUserData(id,"c3")||"na"))
			}
		}
		function dnd_copyA(mode){
        	mygrid.enableMercyDrag(mode);
        	tree.enableMercyDrag(mode);
		}
	</script>	
	<input type="checkbox" id="dnd_copy" onclick='dnd_copyA(this.checked)'> Copy elements when drag-n-drop between tree and grid;
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;"/>
			</td>
            <td width="50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
                <div id="gridbox" width="400px" height="250px" style="background-color:white;overflow:hidden"></div>
            </td>
		</tr>
	</table>
<br>
<div class='sample_code'><div class="hl-main"><pre><span class="hl-code"> 
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code"><div class="hl-main"><pre><span class="hl-code"> 
        ...
        </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
        ...
        </span><span class="hl-comment">//</span><span class="hl-comment">redefine tree-to-grid drop element</span><span class="hl-comment"></span><span class="hl-code">
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">treeToGridElement</span><span class="hl-code"> = </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-identifier">treeObj</span><span class="hl-code">,</span><span class="hl-identifier">treeNodeId</span><span class="hl-code">,</span><span class="hl-identifier">gridRowId</span><span class="hl-brackets">)</span><span class="hl-brackets">{</span><span class="hl-code">
            </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-brackets">[</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-identifier">treeObj</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">treeNodeId</span><span class="hl-brackets">)</span><span class="hl-brackets">]</span><span class="hl-code">;
        </span><span class="hl-brackets">}</span><span class="hl-code">
 
        </span><span class="hl-comment">//</span><span class="hl-comment">redefine grid-to-tree drop element</span><span class="hl-comment"></span><span class="hl-code">
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">gridToTreeElement</span><span class="hl-code"> = </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-identifier">treeObj</span><span class="hl-code">,</span><span class="hl-identifier">treeNodeId</span><span class="hl-code">,</span><span class="hl-identifier">gridRowId</span><span class="hl-brackets">)</span><span class="hl-brackets">{</span><span class="hl-code">
            </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">cells</span><span class="hl-brackets">(</span><span class="hl-identifier">gridRowId</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">getValue</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">+</span><span class="hl-quotes">&quot;</span><span class="hl-string">/</span><span class="hl-quotes">&quot;</span><span class="hl-code">+</span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">cells</span><span class="hl-brackets">(</span><span class="hl-identifier">gridRowId</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">getValue</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
        </span><span class="hl-brackets">}</span><span class="hl-code">
 
 
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">rowToDragElement</span><span class="hl-code"> = </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-brackets">{</span><span class="hl-code">
            </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">cells</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">getValue</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">+</span><span class="hl-quotes">&quot;</span><span class="hl-string">/</span><span class="hl-quotes">&quot;</span><span class="hl-code">+</span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">cells</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">getValue</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
        </span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span></pre></div></div>

<!-- FOOTER -->
<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">&copy; <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>
<!-- FOOTER -->

</body>
</html>
